<template>
    <div class="home">
      <!-- 头部 -->
     <Header title="外卖"/>
      <div class="content">
        
        <!-- 主要内容 -->
        <div class="main">
          <div class="main_bg">
            <div class="search">
              <input type="text" />
              <div class="search_text">搜索</div>
            </div>
            <div class="classify">
                <!-- 大分类 -->
              <div class="big_classify">
                <div v-for="item in big_classify">
                  <svg class="icon" aria-hidden="true"> 
                    <use :xlink:href="`#${item.icon}`"></use>
                  </svg>
                  {{ item.name }}
                </div>
              </div>
              <!-- 小分类 -->
              <div class="small_classify">
                <div v-for="item in small_classify">
                  <svg class="icon" aria-hidden="true"> 
                    <use :xlink:href="`#${item.icon}`"></use>
                  </svg>
                  {{ item.name }}
                </div>
              </div>


            </div>
          
            <van-tabs  class="van-tabs">
              <van-tab v-for="i in centent_nav_list" :title="i.tab">
                <FoodList :store_list = 'i.data'></FoodList>
              </van-tab> 
            </van-tabs>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  </template>


<script setup lang="ts">
  import Footer from '@/components/Footer.vue'
  import FoodList from "./components/FoodList.vue"
  import Header from '@/components/Header.vue'
    import { reactive, toRefs } from 'vue'
    

    const data = reactive({
      big_classify:[
        { name: "美食", icon: "icon-apple-and-pear" },
        { name: "甜点饮品", icon: "icon-tianpin" },
        { name: "超市便利", icon: "icon-chaoshi" },
        { name: "生鲜果蔬", icon: "icon-shuiguo" },
        { name: "滴团买药", icon: "icon-yaopin" }
      ],
      small_classify: [
        { name: "午餐", icon: "icon-iconfonttubiaozhizuo-1" },
        { name: "买酒", icon: "icon-iconfonttubiaozhizuo-" },
        { name: "新鲜水果", icon: "icon-iconfonttubiaozhizuo-9" },
        { name: "汉堡披萨", icon: "icon-iconfonttubiaozhizuo-6" },
        { name: "休闲饮品", icon: "icon-iconfonttubiaozhizuo-8" },
        { name: "夜宵", icon: "icon-iconfonttubiaozhizuo-3" },
        { name: "吐司", icon: "icon-iconfonttubiaozhizuo-5" },
        { name: "跑腿", icon: "icon-paotuiAPP" },
        { name: "美人佳丽", icon: "icon-iconfonttubiaozhizuo-2" },
        { name: "全部分类", icon: "icon-fenlei" },
      ],
      centent_nav_list: [
        {
          tab: "天天神券",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=446220267,22939034&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800",
              title: "隆江猪脚饭",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "减配送费",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "88",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "点评高分",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "999",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "会员满减",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "34",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
           
          ],
        },
      ],
    })

    const {big_classify,small_classify,centent_nav_list} = {...toRefs(data)}
</script>

<style lang="less">

.home {
  display: flex;
  flex-flow: column;
  height: 100%;

  .content {
    flex: 1;
     overflow-y: auto;
    .main {
      // margin-top: -30px;
      .van-tab {
        font-size: 6px;
      }
      .main_bg {
        background-image: linear-gradient(#fff, #f5f5f5);
        padding: 10px 5px 0 5px;
        border-radius: 10px 10px 0 0;
        position: relative;
        .classify {
           padding: 10px 0;
          .big_classify {
            display: flex;
            div{
              display: flex;
              flex: 1;
              justify-content: center;
              flex-flow: column;
              align-items: center;
              .icon{
                width: 20px;
                height: 20px;
                margin-bottom: 3px;
                margin-top: 3px;
              }
            }

            }

          .small_classify {
            display: flex;
            flex-wrap: wrap;
            div {
              display: flex;
              justify-content: center;
              flex-flow: column;
              align-items: center;
              width: 20%;
            }
            .icon {
              width: 16px;
              height: 16px;
              margin-bottom: 3px;
              margin-top: 3px;
            }
          }
          }
        }

        .search {
          position: relative;
          .search_text {
            position: absolute;
            background-color: #ffc400;
            right: -4px;
            top: 1px;
            width: 50px;
            height: 20px;
            border-radius: 16px;
            text-align: center;
            line-height: 20px;
            font-size: 10px;
          }
          input {
            width: 100%;
            border: 1px solid #ffc400;
            border-radius: 20px;
            height: 20px;
          }
        }
      }
    }

    
  }
</style>